<template>
  <a-skeleton loading animation>
    <a-space direction="vertical" :style="{ width: '100%' }" size="large">
      <a-skeleton-line line-height="100" />
      <a-space wrap>
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
        <a-skeleton-shape size="large" class="card" />
      </a-space>

      <a-skeleton-line :rows="4" line-height="50" />
    </a-space>
  </a-skeleton>
</template>

<script setup name="top-title"></script>

<style lang="less" scoped>
  .top-title {
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 16px;
    color: #1d2129;
    line-height: 24px;
  }
  .card {
    width: 18.5vw;
    margin-right: 10px;
    margin-bottom: 10px;
    height: 115px;
  }
</style>
